<template>
  <div ref="print"
       class="transport">
    <div v-for="(element, num) in groupData"
         :key="num">
      <img :src="topImg"
           style="width:80px;height:50px;" />
      <h4 style="font-family: 宋体;text-align: center;font-size: 16px;margin-bottom: 20px;">脱普公司</h4>
      <div style="display: flex;justify-content: flex-start;align-items: center;">
        <div style="font-size: 14px;margin: 5px 0;width: 50%;">
          <label style="font-weight: bold !important;">发货单位:</label>
          <span style="font-size: 13px;margin-left: 20px;">{{ form.customerNameWly }}</span>
        </div>
      </div>
      <div style="display: flex;justify-content: flex-start;align-items: center;">
        <div style="font-size: 14px;margin: 5px 0;width: 50%;">
          <label style="font-weight: bold !important;">原始单据:</label>
          <span style="font-size: 13px;margin-left: 20px;">{{ form.originNumber }}</span>
        </div>
        <div style="font-size: 14px;margin: 5px 0;width: 50%;">
          <label style="font-weight: bold !important;">单据取消日:</label>
          <!-- to do -->
          <span style="font-size: 13px;margin-left: 20px;"></span>
        </div>
      </div>
      <div style="display: flex;justify-content: flex-start;align-items: center;">
        <div style="font-size: 14px; margin: 5px 0; width: 50%;">
          <label style="font-weight: bold !important;">本单编号:</label>
          <span style="font-size: 13px;margin-left: 20px;">{{ form.deliverOrderNo }}</span>
        </div>
        <div style="font-size: 14px;margin: 5px 0;width: 50%;">
          <label style="font-weight: bold !important;">预约时间:</label>
          <!-- to do -->
          <span style="font-size: 13px;margin-left: 20px;"></span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 5px 0; width: 50%;">
          <label style="font-weight: bold !important;">单据种类:</label>
          <span style="font-size: 13px;margin-left: 20px;">{{ form.orderCategory }}</span>
        </div>
        <div style="font-size: 14px; margin: 5px 0; width: 50%;">
          <label style="font-weight: bold !important;">填单日期:</label>
          <span style="font-size: 13px;margin-left: 20px;">{{ $moment(form.createAt).format("YYYY-MM-DD") }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 5px 0; width: 50%;">
          <label style="font-weight: bold !important;">客户代号:</label>
          <span style="font-size: 13px;margin-left: 20px;">{{ form.customerNameTop }}</span>
        </div>
        <div style="font-size: 14px; margin: 5px 0; width: 50%;">
          <label style="font-weight: bold !important;">客户名称:</label>
          <span style="font-size: 13px;margin-left: 20px;">{{ form.consigneeName }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 5px 0; width: 50%;">
          <label style="font-weight: bold !important;"> 联系人:</label>
          <span style="font-size: 13px;margin-left: 20px;">{{ form.toAddress.contactName }}</span>
        </div>
        <div style="font-size: 14px; margin: 5px 0; width: 50%;">
          <label style="font-weight: bold !important;">联系电话:</label>
          <span style="font-size: 13px;margin-left: 20px;">{{  form.toAddress.contactMobile }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="margin-bottom: 8px; margin: 5px 0; font-size: 14px;">
          <label style="font-weight: bold !important;">收货地址:</label>
          <span style="font-size: 13px;">
            {{ form.toAddress.province }}{{ form.toAddress.city }}{{ form.toAddress.district }}{{ form.toAddress.address }}
          </span>
        </div>
      </div>
      <div style="height: 1px; border-top: 1px solid var(--prev-border-color-grey); margin: 8px 0;"></div>
      <div style="min-height: 684px; max-height: 700px;">
        <table style="width: 100%; font-size: 11px; table-layout: fixed; border-collapse: collapse; border: none;"
               border="0"
               cellspacing="0"
               cellpadding="0">
          <thead style="line-height: 20px; word-wrap: break-word; word-break: break-word;">
            <tr>
              <th style="width:4%;">序号</th>
              <th style="width:35%;">简称/中文名称</th>
              <th style="width:6%;">箱入数</th>
              <th style="width:5%;">数量</th>
              <th style="width:16%;">单位/条形码</th>
              <th>未税单价</th>
              <th>未税金额</th>
              <th>税额</th>
              <th>含税金额</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item, index) in element.slice(0, element.length)">
              <tr v-if="item.name"
                  :key="index">
                <td style="height: 58px; padding: 0px 4px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                  {{ num * 10 + (index + 1) }}
                </td>
                <td style="height: 58px; padding: 0px 4px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                  {{ item.name }}<br />{{ item.chineseName }}
                </td>
                <td style="height: 58px; padding: 0px 4px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                  {{ item.spc }}
                </td>
                <td style="height: 58px; padding: 0px 4px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                  {{ item.qty }}
                </td>
                <td style="height: 58px; padding: 0px 4px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                  {{ item.extendDoc1 }}<br />
                  {{ item.barcode }}
                </td>
                <td style="height: 58px; padding: 0px 4px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                  {{ item._noTaxPrice }}
                </td>
                <td style="height: 58px; padding: 0px 4px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                  {{ item._noTaxAmount }}
                </td>
                <td style="height: 58px; padding: 0px 4px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                  {{ item._itemTax }}
                </td>
                <td style="height: 58px; padding: 0px 4px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                  {{ item._taxAmount }}
                </td>
              </tr>
            </template>
            <tr>
              <td colspan="2"
                  style="text-align:left;padding-top:8px">
                <span>送货金额（</span>本页小计<span>）</span>
              </td>
              <td colspan="2"
                  style="text-align: right;padding-top:8px">
                {{ element[element.length - 1].qty }}件
              </td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                {{ element[element.length - 1].noTaxAmount }}
              </td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                {{ element[element.length - 1].itemTax }}
              </td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">
                {{ element[element.length - 1].taxAmount }}
              </td>
            </tr>
            <tr v-if="num === groupData.length - 1">
              <td colspan="4"
                  style="text-align:left;padding-top:8px">
                送货金额（总计）
              </td>
              <td></td>
              <td></td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">{{ returnThousandDigit(form.total.totalNoTaxAmount, 2) }}</td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">{{ returnThousandDigit(form.total.totalItemTax, 2) }}</td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">{{ returnThousandDigit(form.total.totalTaxAmount, 2) }}</td>
            </tr>
            <tr v-if="num === groupData.length - 1">
              <td colspan="4"
                  style="text-align:left;padding-top:8px">
                商业折扣
              </td>
              <td></td>
              <td></td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">{{ returnThousandDigit(form.discountTotal.totalNoTaxAmount, 2) }}</td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">{{ returnThousandDigit(form.discountTotal.totalItemTax, 2) }}</td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">{{ returnThousandDigit(form.discountTotal.totalTaxAmount, 2) }}</td>
            </tr>
            <tr v-if="num === groupData.length - 1">
              <td colspan="4"
                  style="text-align:left;padding-top:8px">
                发票金额
              </td>
              <td></td>
              <td></td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">{{ returnThousandDigit(form.amountTotal.totalNoTaxAmount, 2) }}</td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">{{ returnThousandDigit(form.amountTotal.totalItemTax, 2) }}</td>
              <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; text-align: center; word-break: break-word; line-height: 20px;">{{ returnThousandDigit(form.amountTotal.totalTaxAmount, 2) }}</td>
            </tr>
            <tr v-if="num === groupData.length - 1">
              <td colspan="2"
                  style="text-align:left; padding-top:5px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 20px;">
                总货总件数
              </td>
              <td colspan="2"
                  style="text-align:right; padding-top:5px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 20px;">
                {{ form.totalQuantity }}件
              </td>
              <td colspan="2"
                  style="text-align:center; padding-top:5px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 20px;">
                总体积：{{ form.calculateVolume }}立方米
              </td>
              <td colspan="3"
                  style="text-align:center; padding-top:5px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 20px;">
                总重量：{{ form.calculateWeight }}公斤
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { order, top } from '@/api/index'
import { mapState } from "vuex";
export default {
  name: 'TopDistributorPrint',
  data () {
    return {
      form: {},
      groupData: [],
      goodsList: []
    };
  },
  computed: {
    ...mapState({
      tenantInfo: (state) => state.tenant.tenantInfo
    }),
    logos () {
      return this.tenantInfo?.config?.logos || [];
    },
    topImg () {
      let src = null
      this.logos?.length && this.logos.forEach(o => {
        if (o.desc == '有色透明logo') {
          src = o.value
        }
      });
      return src || require("@/static/images/d_logo.png")
    }
  },
  created () {
    this.orderId = Number(this.$route.query.orderId);
    this.getDetail();
  },
  methods: {
    async loadTopOrder () {
      let { data } = await top.loadTopOrder({ orderId: this.orderId });
      // let arr = this.goodsList.filter(v => data?.goodsList.some(o => o.goodsId === v.goodsId && o.batchNo === v.batchNo));
      let arr = [];
      if (data) {
        this.form = {
          ...this.form,
          ...data,
          customerNameTop: data?.customerCode
        };
        this.goodsList.map(item => {
          data?.goodsList.map(ele => {
            if (item.goodsId === ele.goodsId && item.batchNo === ele.batchNo) {
              return arr.push({
                ...item,
                chineseName: ele.chineseName,
                extendDoc1: ele.purchaseUnit,
                noTaxPrice: ele.noTaxPrice,
                _noTaxPrice: this.returnThousandDigit(ele.noTaxPrice, 4),
                noTaxAmount: ele.noTaxAmount,
                _noTaxAmount: this.returnThousandDigit(ele.noTaxAmount, 2),
                itemTax: ele.itemTax,
                _itemTax: this.returnThousandDigit(ele.itemTax, 2),
                taxAmount: ele.taxAmount,
                _taxAmount: this.returnThousandDigit(ele.taxAmount, 2),
              })
            }
          })
        });
      } else {
        arr = this.goodsList;
      }
      this.groupData = JSON.parse(
        JSON.stringify(this.group(arr, 10))
      );
      this.print();
    },
    async getDetail () {
      let { data } = await order.orderDetailsApi(this.orderId)
      this.form = {
        ...data,
        customerNameWly: data?.customerName,
        total: {
          totalNoTaxAmount: 0,
          totalItemTax: 0,
          totalTaxAmount: 0
        },
        discountTotal: {
          totalNoTaxAmount: 0,
          totalItemTax: 0,
          totalTaxAmount: 0
        },
        amountTotal: {
          totalNoTaxAmount: 0,
          totalItemTax: 0,
          totalTaxAmount: 0
        },
      };
      this.goodsList = data.goodsList.map(item => {
        return {
          ...item,
          name: item.goodsName,
          spc: item.spec,
          qty: item.quantity,
          barcode: item.barcode,
          _noTaxPrice: this.returnThousandDigit(0, 4),
          _noTaxAmount: this.returnThousandDigit(0, 2),
          _itemTax: this.returnThousandDigit(0, 2),
          _taxAmount: this.returnThousandDigit(0, 2),
        }
      });
      this.loadTopOrder();
    },
    /**
     * 千分位处理
     */
    returnThousandDigit (value, precision = 0, splitDesc = ",") {
      const str = value.toFixed(precision);
      const reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
      return str.replace(reg, "$1" + splitDesc);
    },
    group (array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, (index += subGroupLength)));
      }
      newArray.forEach(item => {
        // 分页合计
        let data = {
          qty: 0,
          noTaxPrice: 0,
          noTaxAmount: 0,
          itemTax: 0,
          taxAmount: 0
        };
        item.forEach(element => {
          element.noTaxPrice = element.noTaxPrice || 0;
          element.noTaxAmount = element.noTaxAmount || 0;
          element.itemTax = element.itemTax || 0;
          element.taxAmount = element.taxAmount || 0;
          data.qty += element.qty;
          data.noTaxPrice += element.noTaxPrice;
          data.noTaxAmount += element.noTaxAmount;
          data.itemTax += element.itemTax;
          data.taxAmount += element.taxAmount;
        });
        item.push({
          ...data,
          noTaxAmount: this.returnThousandDigit(data.noTaxAmount, 2),
          itemTax: this.returnThousandDigit(data.itemTax, 2),
          taxAmount: this.returnThousandDigit(data.taxAmount, 2)
        });
      });
      return newArray;
    },
    print () {
      setTimeout(() => {
        this.$print(this.$refs.print)
        // if (window.document.execCommand("print")) window.close();
        // window.print()
      }, 1000);
    },
  }
}
</script>

<style lang="scss" scoped>
@media print {
  @page {
    size: auto A4 landscape;
  }
  .transport {
    page-break-after: always;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    height: auto;
  }
}
@media screen {
  .transport {
    display: none;
  }
}
</style>
